<template>
  <div>
    <img
      class="headerImg"
      src="http://img11.360buyimg.com/da/jfs/t1/79455/7/1931/74582/5d0380b7E5a7e169e/df25f5d760ac9828.jpg"
    >
    <cube-form :model="model" :schema="schema" @submit="submitHandler"></cube-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      model: {
        username: "",
        password: ""
      },
      schema: {
        fields: [
          //用户名配置
          {
            type: "input",
            modelKey: "username",
            label: "用户名",
            props: {
              placeholder: "请输入用户名"
            },
            rules: {
              //校验规则
              required: true,
              type: "string",
              min: 3,
              max: 15
            },
            trigger: "blur",
            messages: {
              required: "用户名不能为空",
              min: "用户名不能少于三个字符",
              max: "用户名不能大于十五个字符"
            }
          },
          //密码配置
          {
            type: "input",
            modelKey: "password",
            label: "密码",
            props: {
              placeholder: "请输入密码",
              type: "password",
              eye: {
                open: false
              }
            },
            rules: {
              //校验规则
              required: true
            },
            trigger: "blur",
            messages: {
              required: "密码不能为空"
            }
          },
          {
            type: "submit",
            label: "登录"
          }
        ]
      }
    };
  },
  methods: {
    async submitHandler(e) {
      e.preventDefault();
      try {
        const result = await this.$http.get("/api/login", {
          params: this.model
        });
        console.log(result);
        if (result.code == "0") {
          this.$store.commit("setToken", result.token);
          window.localStorage.setItem("token", result.token);
          //window.sessionStorage.setItem('token',result.data.token);
          this.$router.replace({ path: "/index" });
          //this.$router.push("/index");
        } else {
          alert(result.message);
        }
      } catch (err) {
        console.log(err);
      }
    }
  }
};
</script>
<style lang="stylus" scoped>
.headerImg {
  height: 150px;
  width: 100%;
}
</style>
